<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="dashboard/view-dashboard-overview.html">
<link rel="import" href="dashboard/view-dashboard-notification.html">
<link rel="import" href="dashboard/view-dashboard-statistics.html">
<link rel="import" href="view-app.html">
<link rel="import" href="style/shared-styles.html">

<dom-module id="view-dashboard">
  <script>
    /**
     * # Dashboard
     * `<view-dashboard>` show the summary status of your factory.
     * @ViewDashboard
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewDashboard extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
      Polymer.Element) {

      static get is() {
        return 'view-dashboard'
      }

      static get template() {
        return Polymer.html`
        <style include="shared-styles">
            :host {
              display: block;
            }
          </style>
          <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
          <app-header id="subheader" slot="header" shadow>
            <paper-tabs selected="{{tabs}}" attr-for-selected="name" role="navigation" autoselect noink>
              <template is="dom-repeat" items="[[submenus]]">
                <paper-tab link role="tab" name$="[[item.view]]" disabled="[[item.disable]]">
                  <a href="app/dashboard/[[item.view]]" tabindex="-1">
                    <paper-icon-button icon="[[item.icon]]" alt="[[item.title]]"></paper-icon-button>
                    <span class="tab-title">{{localize(item.title)}}</span>
                  </a>
                </paper-tab>
              </template>
            </paper-tabs>
          </app-header>
          <iron-pages selected="[[tabs]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
            <view-dashboard-overview name="overview"></view-dashboard-overview>
            <view-dashboard-notification name="notification"></view-dashboard-notification>
            <view-dashboard-statistics name="statistics"></view-dashboard-statistics>
          </iron-pages>
          `
      }

      static get properties() {
        return {
          route: String,
          language: String,
          tabs: {
            type: String,
            reflectToAttribute: true,
            value: 'overview',
            observer: '_tabsChanged'
          },
          submenus: {
            type: Array,
            value: () => {
              return [{
                "title": "overview",
                "view": "overview",
                "icon": "vaadin:cubes"
              },
              {
                "title": "notification",
                "view": "notification",
                "icon": "vaadin:bell"
              },
              {
                "title": "statistics",
                "view": "statistics",
                "icon": "vaadin:bar-chart"
              }
              ]
            }
          }
        }
      }

      _tabsChanged(tabs) {
        const resolvedTabsUrl = this.resolveUrl('dashboard/view-dashboard-' + tabs + '.html')
        Polymer.importHref(resolvedTabsUrl, null, null, true)
      }
      connectedCallback() {
        super.connectedCallback()
        this.loadResources(this.resolveUrl('../data/locales.json'))
      }
    }
    window.customElements.define(ViewDashboard.is, ViewDashboard)
  </script>
</dom-module>